<!DOCTYPE html>
<!-- saved from url=(0042)http://wx.zhongfubang.com/yiyuan_info.html -->
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<link href="./css/mui.min.css" rel="stylesheet">
		<link href="./css/dabing.css" rel="stylesheet">
		<style type="text/css" abt="234"></style>
		<style type="text/css"></style>
		<style type="text/css">
			object,
			embed {
				-webkit-animation-duration: .001s;
				-webkit-animation-name: playerInserted;
				-ms-animation-duration: .001s;
				-ms-animation-name: playerInserted;
				-o-animation-duration: .001s;
				-o-animation-name: playerInserted;
				animation-duration: .001s;
				animation-name: playerInserted;
			}
			
			@-webkit-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@-ms-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@-o-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			.showWindowFont{
				margin-bottom: 0px; 
				white-space: normal;
				font-family: 宋体; 
				font-size: 19px;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav bgcolor">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">计划详情</h1>

		</header>
		<div id="app" class="mui-content">
			<div class="mui-card">
				<div class="mui-card-header">
					<div class="mui-media-body">
						<div class="mui-row">
							<h3 style="float: left;">{{product.name}}</h3></div>
						<div class="mui-row"><span style="float: left;"><i class="age">出生满30天-60周岁</i>可加入</span></div>
					</div>
				</div>
				<div class="mui-card-content"><img class="mui-col-xs-12">
					<div class="mui-row des-row"><img src="./img/description.png" class="desimg"> <span class="destitle">计划介绍</span></div>
					<div class="describe-box">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" onclick="showContentModel('maxMutualAssistance');"><img src="./img/ok.png"> 最高可获得互助
								<a data-info-type="project_max_price_info" class="mui-navigate-right">
									<p>{{product.amountProtection}}<i>元</i></p>
								</a>
							</li>
							<li class="mui-table-view-cell"><img src="./img/ok.png"> 计划涵盖
								<a data-info-type="project_plans_include_info" class="mui-navigate-right">
									<p onclick="showContentModel('planCoverage');">{{product.productTitle}}</p>
								</a>
							</li>
							<li class="mui-table-view-cell"><img src="./img/ok.png"> 本计划观察期（防止带病加入）
								<a data-info-type="project_observation_time_info" class="mui-navigate-right">
									<p onclick="showContentModel('click187Days');">187<i>天</i></p>
								</a>
							</li>
						</ul>
						<ul class="mui-table-view more-info">
							<li class="mui-table-view-cell mui-collapse">
								<a class="mui-navigate-right">更多计划明细</a>
								<div class="mui-collapse-content">
									<ul class="mui-table-view">
										<li class="mui-table-view-cell">
											<a name="jiarutiaojian.html" data-info-type="project_condition_joining_info" onclick="showContentModel('joinCondition');" class="mui-navigate-right">
												加入条件
												<span class="list-name" style="margin-left: 100px;">点击查看</span></a>
										</li>
										<li class="mui-table-view-cell">
											<a name="fuwufeiyong.html" data-info-type="project_price_info" class="mui-navigate-right" onclick="showContentModel('serviceFee');">
												服务费用
												<span class="list-name" style="margin-left: 100px;">点击查看 </span></a>
										</li>
										<li class="mui-table-view-cell">
											<a name="fuwufeiyong.html" data-info-type="project_price_info" class="mui-navigate-right" onclick="showContentModel('equalizationRule');">
												均摊规则
												<span class="list-name" style="margin-left: 100px;">点击查看</span></a>
										</li>
										<li class="mui-table-view-cell">
											<a name="healthyaoqiu.html" data-info-type="project_health_requirement" onclick="showContentModel('clickHealthDemand'); " class="mui-navigate-right">
												健康要求
												<span class="list-name" style="margin-left: 100px;">点击查看</span></a>
										</li>
										<li class="mui-table-view-cell">
											<a name="jiarutiaojian.html" data-info-type="project_condition_joining_info" onclick="showContentModel('continueCondition');" class="mui-navigate-right">
												延续条件
												<span class="list-name" style="margin-left: 100px;">点击查看</span></a>
										</li>
										<li class="mui-table-view-cell">
											<a name="healthyaoqiu.html" data-info-type="project_health_requirement" onclick="showContentModel('commonProblem'); " class="mui-navigate-right">
												常见问题
												<span class="list-name" style="margin-left: 100px;">点击查看</span></a>
										</li>
										
									</ul>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="mui-card-footer"></div>
			</div>
			<!--加入条件展示-->
			<div id="content_modal" class="mui-popover">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll" style="padding: 1rem;">
						<div class="showWindowFont" id="showWindowDiv" v-html="showContent">
						</div>
					</div>
					<div class="mui-scrollbar mui-scrollbar-vertical">
						<div class="mui-scrollbar-indicator" style="transition-duration: 0ms; display: none; height: 8px; transform: translate3d(0px, -8px, 0px) translateZ(0px);"></div>
					</div>
				</div>
			</div>
			
		</div>
		<div class="footer-btn">
			<div class="mui-button-row">
				<button type="button" id="btn_join_family" class="mui-btn mui-btn-warning bgcolor mui-pull-left">为家人加入</button>
				<button type="button" id="btn_join_myself" class="mui-btn mui-btn-warning bgcolor mui-pull-right btn2">立即加入</button>
			</div>
		</div>

		<script src="./js/mui.js"></script>
		<script src="./js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript" src="./js/common.js"></script>
		<script type="text/javascript">
			 mui.init({
            	swipeBack: true //启用右滑关闭功能
        	});
        	$('.mui-popover').scroll({
				indicators: true //是否显示滚动条
			});
			var vue = new Vue({
				el: "#app",
				data: {
					product: [],
					user_info: isNull(localStorage.appUser)?[]:JSON.parse(localStorage.appUser),
					showContent:[]
				},
				methods: {
					show_info: function(event) {
						var self = event.currentTarget;
						var info_type = self.getAttribute("data-info-type");
						this.project_modal_info = this.project_info[info_type];
						mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100);
						mui('#project_modal').popover('show');
					},
					check_exist_order: function(event) {
						if(!isLogin()){
							return;
						}
						var url = root + "index/check_exist_order";
						mui.post(url, {
								appUserId: JSON.parse(localStorage.appUser).id,
								productId: $.getUrlParam('id'),
								type: 1
							},
							function(result) {
								if(result.status == "failed") {
									btn_join_myself.disabled = true;
								}
							}, 'json'
						);
					}
				}
			})

			window.onload = init();

			function init() {
				//var self = plus.webview.currentWebview();
				//vue.project_id = self.project_id;

				//vue.get_project_info();
				get_product_info();
				vue.check_exist_order();

			}

			function get_product_info() {
				var url = root + "index/selectProductDetail";
				mui.get(url, {
						id: $.getUrlParam('id')
					},
					function(data) {
						vue.product = data.data;
					}, 'json'
				);
			}

			btn_join_family.addEventListener('tap', function() {
				if(!isLogin()) {
						mui.openWindow('login.html', '', {});
						return;
					}
				mui.openWindow(root+'APP/chooseApplyPeople.html?productId=' + $.getUrlParam('id')+'&r='+Math.random(), '', {});
			});

			btn_join_myself.addEventListener('tap', function() {
				/*var url = root + 'index/check_exist_order';
				mui.post(url, {
					appUserId: JSON.parse(localStorage.appUser).id,
					productId: vue.product.id,
					type : 1
				}, function(data) {
					var code = data.code;
					if(code == 1) {
						//跳转购买页面
						mui.openWindow('yiyuan_buy.html', 'id', {})
					} else {
						//跳转信息页面
						mui.openWindow('user_info_completion.html?project_id=' + vue.project_id, '', {})
					}
				}, 'json');*/
				if(!isLogin()) {
						mui.openWindow('login.html', '', {});
						return;
					}
				if(isNull(vue.user_info.idCode) || isNull(vue.user_info.realName)) {
					mui.openWindow('supplement_user_info.html?productId=' + $.getUrlParam('id') + "&appUserId=" + vue.user_info.id, '', {});
				} else {
					var urlResult = ajaxAction(root+'wechat/getAuthorizeURL?type=1&applyPeopleId='+vue.user_info.id+'&productId='+$.getUrlParam('id')+'&appUserId='+vue.user_info.id,null);
					window.location.href=urlResult.data;
				}
			});
			mui(".mui-scroll-wrapper").scroll();
			/**
			 * 弹出内容展示
			 */
			var contentArray=[];
			var titleArray=['joinCondition','click187Days','clickHealthDemand','commonProblem','scopeStandard',
							'equalizationRule','planCharter','serviceFee','continueCondition','memberConvention',
							'maxMutualAssistance','planCoverage'];
			function showContentModel(sender){
				if(contentArray.length==0){
					contentArray=[
									vue.product.joinCondition,vue.product.click187Days,vue.product.clickHealthDemand,vue.product.commonProblem,
									vue.product.scopeStandard,vue.product.equalizationRule,vue.product.planCharter,
									vue.product.serviceFee,vue.product.continueCondition,vue.product.memberConvention,vue.product.maxMutualAssistance,
									vue.product.planCoverage
								 ];
				}
				for(var i=0;i<titleArray.length;i++){
					if(sender==titleArray[i]){
						vue.showContent=null;
						vue.showContent=contentArray[i];
						mui("#content_modal").popover('show');
						break;
					}
				}
			}
			
			
		</script>

	</body>

</html>